<template>
	<view class="xzy-popup">
		<uv-popup ref="popupRef" :mode="mode" bgColor="none" :closeOnClickOverlay="isShowClose"
			:safeAreaInsetBottom="false">
			<view class="main" :style="{background:background}" v-if="type==='dialog'">
				<view class="hedaer">
					<view class="close">
						<uv-icon v-if="isShowClose" name="close" color="#888888" size="24" bold
							@click="close"></uv-icon>
						<view style="height: 100%;height: 40rpx;"></view>
					</view>
					<view v-if="title" class="title">{{ title }}</view>
				</view>
				<view class="content">
					<slot></slot>
				</view>
				<view class="btn" @click="btnClick" v-if="isShowBtn">{{ btnText }}</view>
				<view class="footer" v-if="isShowFooter">
					<view class="cancel" @click="close">
						取消
					</view>
					<view class="submit" @click="btnClick">
						{{FooterBtnText}}
					</view>
				</view>
			</view>
			<view class="general-format" v-else>
				<view class="popup-header">
					<view class="title">
						{{title}}
					</view>
					<view class="close">
						<uv-icon name="close" color="#515151" size="24" @click="close"></uv-icon>
					</view>
				</view>
				<slot></slot>
			</view>
		</uv-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';

	const {
		ctx
	} = getCurrentInstance()


	defineProps({
		title: String,
		mode: {
			type: String,
			default: "center"
		},
		type: {
			type: String,
			default: "dialog"
		},
		isShowBtn: {
			type: Boolean,
			default: false
		},
		btnText: {
			type: String,
			default: () => "确 定"
		},
		isShowClose: {
			type: Boolean,
			default: true
		},
		isShowFooter: {
			type: Boolean,
			default: false
		},
		FooterBtnText: {
			type: String,
			default: () => "确 定"
		},
		background: {
			type: String,
			default: 'linear-gradient(360deg, #FFFFFF 0%, #E8E7FF 100%)'
		}
	})

	const emit = defineEmits(['submit'])

	const popupRef = ref()

	function open() {
		popupRef.value.open()
	}

	function close() {
		popupRef.value.close()
	}

	function btnClick() {
		emit("submit")
	}


	defineExpose({
		open,
		close
	})
</script>
<style scoped lang="scss">
	:deep(.xzy-popup .uv-popup__content) {
		background: transparent !important;
	}

	.main {
		width: 560rpx;
		border-radius: 24rpx;
		padding-bottom: 60rpx;
	}

	.hedaer {
		padding: 30rpx;

		.close {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.title {
			font-size: 32rpx;
			color: #222222;
			font-weight: 700;
			text-align: center;
		}
	}

	.content {
		padding: 0 30rpx 30rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.btn {
		width: 440rpx;
		height: 100rpx;
		background: #6E68E9;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-weight: 700;
		border-radius: 60rpx;
	}

	.btn_box {
		height: 300rpx;
		background-color: #FFFFFF;

	}

	.footer {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.cancel,
		.submit {
			width: 160rpx;
			padding: 20rpx 50rpx;
			background: #ccc;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 500;
		}

		.submit {
			background: linear-gradient(270deg, #A7A1F6 0%, #6E68E9 100%);
		}
	}

	.general-format {
		width: 100%;
		background: #fff;
		border-radius: 23rpx;

		.popup-header {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 34rpx;
			height: 100rpx;
			width: 100%;
			position: relative;

			.title {
				color: #515151;
			}

			.close {
				position: absolute;
				right: 20rpx;
			}
		}
	}
</style>